<script setup lang="ts">
import EchartBar from '@/components/Echart/Bar/BarChart.vue'
import * as echarts from 'echarts'
import { reactive } from '@vue/reactivity'
const chartData = reactive({
  name: 'warehouseInWarehouseOut',

  legend: {
    right: '3%',
    top: '10%',
    itemWidth: 7.2,
    itemHeight: 10.5,
    textStyle: {
      fontSize: 13.99,
      lineHeight: 15,
      color: '#fff',
    },
  },
  grid: {
    left: '3%',
    right: '15%',
    bottom: '5%',
    top: '20%',
    containLabel: true,
  },

  xAxis: {
    type: 'category',
    data: ['中国区', '非洲区', '美洲区', '亚太区', '欧美区'],
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: '#fff', // 设置 X 轴标签字体颜色

      interval: 0, // 强制显示所有标签
      fontSize: 14,
      margin: 5, // 调整标签与轴线的距离
    },
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true,
    },
    splitLine: {
      show: false,
    },
  },
  series: [
    {
      type: 'bar',
      name: '入库',
      data: [300, 900, 900, 300, 200],
      barWidth: 10,
      showBackground: true,
      itemStyle: {
        color: '#5A42EC', // 设置柱子颜色
      },
    },
    {
      type: 'bar',
      name: '出库',
      data: [400, 800, 1000, 500, 400],
      barWidth: 10,
      showBackground: true,
      itemStyle: {
        color: '#00EEF0', // 设置柱子颜色
      },
    },
  ],
})
</script>
<template>
  <el-carousel-item>
    <card-box>
      <!-- <template v-slot:title>
        <h1 >各区入库、出库数量展示</h1>
      </template> -->
      <EchartBar :chart-data="chartData"></EchartBar>
    </card-box>
  </el-carousel-item>
</template>
